<template>
  <div class="page luckdraw-address-edit">
    <p class="info">请在<span class="red">{{expireTime}} 前</span>提供收货信息给抽奖发起人</p>
    <div class="label">收货地址</div>
    <m-link
      :title="addressText"
      isLast
      isLargeHeight
      @on-click="onChooseAddress">
    </m-link>
    <div class="btn-section">
      <div class="btn-inner">
        <m-button text="保存" @onClick="onSubmit"></m-button>
      </div>
    </div>
  </div>
</template>

<script>
import MLink from 'comp/m-link'
import MButton from 'comp/m-button'
import { chooseAddress } from '@/utils/wx'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MLink,
    MButton
  },
  data () {
    return {
      activityId: '',
      addressText: '请选择收货地址',
      addressData: {},
      expireTime: ''
    }
  },
  async mounted () {
    this.resetData()
    const activityId = this.$root.$mp.query.activityId
    const awardTime = this.$root.$mp.query.awardTime
    this.activityId = activityId
    // 开奖后3天内
    if (awardTime) {
      this.expireTime = this.timeFilter(Number(awardTime) + 3 * 24 * 60 * 60)
    }
  },
  methods: {
    /**
     * 选择收货地址
     */
    async onChooseAddress () {
      const res = await chooseAddress()
      this.addressText = `${res.userName}，${res.telNumber}，${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`
      this.addressData = res
    },
    /**
     * 保存地址
     */
    async onSubmit () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('setActivityAddr', {
        activityid: this.activityId,
        playerid: openId,
        addr: JSON.stringify(this.addressData)
      })
      if (ret) {
        wx.showToast({
          icon: 'success',
          title: '已保存',
          duration: 2000
        })
        setTimeout(() => {
          wx.navigateBack()
        }, 2000)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.luckdraw-address-edit {
  .info {
    font-size: 28rpx;
    color: #333;
    background-color: #fff;
    padding: 30rpx;
    .red {
      color: #e0382f;
    }
  }
  .label {
    font-size: 28rpx;
    color: #777;
    padding: 40rpx 30rpx 20rpx;
  }
  .btn-section {
    padding: 20rpx 20rpx;
    .btn-inner {
      padding: 20rpx 20rpx;
    }
  }
}
</style>
